import React, { useState, useEffect } from 'react';
import { NavBar, Button, Input, SpinLoading, Toast } from 'antd-mobile';
import { useNavigate } from 'react-router-dom';

function Changeqianming() {
    const navigate = useNavigate();
    const [value, setValue] = useState('');
    const [saved, setSaved] = useState(false);
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        // 从本地存储获取个性签名
        const qianming = localStorage.getItem('userQianming') || '';
        setValue(qianming);
    }, []);

    const back = () => {
        navigate(-1);
    };

    const handleSave = () => {
        if (value.trim()) {
            setSaved(true);
            setLoading(true);
            
            // 保存到本地存储
            localStorage.setItem('userQianming', value.trim());
            
            setTimeout(() => {
                setLoading(false);
                Toast.show({ content: '保存成功', position: 'bottom' });
                navigate(-1);
            }, 1000);
        }
    };

    const right = (
        <Button
            color='success'
            disabled={!value.trim()}
            style={{
                background: value.trim() ? '#07c160' : '#f5f5f5',
                color: value.trim() ? '#fff' : '#bbb',
                border: 'none',
                fontWeight: 600,
                fontSize: 16,
                boxShadow: 'none'
            }}
            onClick={handleSave}
        >
            保存
        </Button>
    );

    return (
        <div style={{ background: '#f7f7f7', minHeight: '100vh', position: 'relative' }}>
            <NavBar right={right} onBack={back} style={{ fontWeight: 700, fontSize: 20 }}>
                个性签名
            </NavBar>
            <div style={{
                background: '#fff',
                margin: '32px 0 0 0',
                padding: '0 20px',
                borderRadius: 0,
                borderBottom: '1px solid #eee'
            }}>
                <Input
                    value={value}
                    onChange={val => setValue(val)}
                    placeholder='请输入内容'
                    clearable
                    style={{
                        fontSize: 22,
                        border: 'none',
                        outline: 'none',
                        padding: '18px 0 10px 0',
                        background: 'transparent'
                    }}
                    maxLength={20}
                />
            </div>
         
            {loading && (
                <div style={{
                    position: 'fixed',
                    top: 0,
                    left: 0,
                    width: '100vw',
                    height: '100vh',
                    background: 'rgba(0,0,0,0.15)',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    zIndex: 9999
                }}>
                    <SpinLoading color="primary" style={{ width: 48, height: 48 }} />
                </div>
            )}
        </div>
    );
}

export default Changeqianming;